<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;


            background: url(../../static/loginBack.jpg) no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
        }

        .layui-form{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 10%;

        }

        .container{
            width: 420px;
            height: 170px;
            min-height: 150px;
            max-height: 320px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            z-index: 130;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
            font-size: 16px;

        }

        .layui-input{
            border-radius: 5px;
            width: 300px;
            height: 40px;
            font-size: 15px;
        }

        .layui-form-item{
            margin-left: -20px;
        }


        .layui-btn{
            margin-left: -50px;
            border-radius: 5px;
            width: 350px;
            height: 40px;
            font-size: 15px;
        }

        a:hover{
            text-decoration: underline;
        }
    </style>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>  <!--引入jquery -->
    <script type="text/javascript">
          $(function(){
              //添加单击事件
              $("#loginBtn").click(function(){
                  //获取请求参数
                  var loginUsername = $.trim($("#username").val());  //(将用户不小心输入的空格去掉)
                  var loginPassword = $.trim($("#password").val());

                  //发送请求
                  $.ajax({
                      url:'[[@{/user/login}]]',    //thymeleaf在ajax中设置地址行形式
                      data:{
                          username:loginUsername,   //与controller中的形参名相同
                          password:loginPassword,
                      },
                      type:"POST",
                      dataType:"JSON",
                      success:function (data){
                          if(data.code=="1"){
                              //登录成功，跳转到首页
                              window.location.href="/Movie/moviePage";
                          }else{
                              //登录失败，不跳转（显示错误信息）
                              alert(data.msg);
                          }
                      }
                  });

                  return false;
              });
          });
      </script>


</head>

<body>
<form class="layui-form" >
    <div class="container">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" id="username"required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" name="login" id="loginBtn">
                    登陆
                </button>
            </div>
        </div>

        <li class="col-12 col-m-12"><p><a href="/user/registerPage" class="f-12 f-gray">新用户注册</a></p></li>

    </div>
</form>




    <!-- body 末尾处引入 layui -->
    <script src="../../static/layui/layui.js"></script>
</body>
</html>